<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<style>
    div.box {
        margin: 10px 0;
        background-color: white;
    }
    .wrapper {
        background-color: gray;
    }
    .floor p span {
        display: inline-block;
        margin-left: 15px;
    }
    .floor .content {
        margin-left: 50px;
    }
</style>
<body>
    <div class="wrapper">
        <div class="box">
            昵称<input type="text"><br>
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <input type="checkbox" >匿名<br>
            <input type="button" value="发表">
        </div>
    </div>
</body>
<script>
    const $name = $(":text"), $content = $("textarea"), $btn = $(":button"), $box = $(".box"), $check =$(":checkbox"); 
    $btn.on("click",function () {
        const {log} = console;
        if ($name.val() && $content.val()){
            let name;
            if ($check.prop("checked")) {
                name = "路人甲"
            } else {
                name = $name.val();
            }           
            const content = $content.val()
            $name.val("")
            $content.val("")
            const date = new Date()
            const $floor = $('<div class="floor"><p></p><p class="content"></p></div>')
            $('<span></span>').text(name).appendTo($floor.children().eq(0))
            $('<span></span>').text(date).appendTo($floor.children().eq(0))
            $('<span></span>').text(content).appendTo($floor.children().eq(1))
            $box.after($floor)
        } else {
            alert("内容或昵称不能为空")
        }
    })
</script>
</html>